import React, { Component } from 'react'
import { connect } from 'react-redux'
import { create } from '../redux/actions/person'

class Person extends Component {
    render() {
        const { persons } = this.props
        return (
            <div>
                Person
                <br />
                <h2>求和{this.props.count}</h2>
                name <input ref={c => this.name = c} type="text" />
                <br />
                age <input ref={c => this.age = c} type="text" />
                <br />
                <button onClick={this.create}>create</button>
                <ul>
                    {
                        persons.map(person => {
                            return <li key={person.id}>name:{person.name},age:{person.age}</li>
                        })
                    }
                </ul>
            </div>
        )
    }
    create = () => {
        const { value: name } = this.name
        const { value: age } = this.age
        this.props.create({ name, age, id: Date.now() })
    }
}

export default connect(
    ({ persons,count }) => ({ persons,count}),
    {
        create
    }
)(Person)